<template>
  <div class="hospital-page">
    <!-- 顶部导航栏 -->
    <div class="header">
      <div class="header-content">
        <div class="back-btn" @click="$router.go(-1)">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M15 18l-6-6 6-6"/>
          </svg>
        </div>
        <div class="header-title">第二步: 选择医院</div>
        <div class="home-btn">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
            <polyline points="9,22 9,12 15,12 15,22"/>
          </svg>
        </div>
      </div>
    </div>

    <!-- 医院标题和操作按钮 -->
    <div class="section-header">
      <div class="title-section">
        <div class="main-title">附近医院</div>
        <div class="sub-title">找到您附近的医院</div>
        <div v-if="userLocation" class="location-info">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#1877F2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
            <circle cx="12" cy="10" r="3"/>
          </svg>
          <span>当前位置</span>
        </div>
      </div>
      <div class="action-buttons">
        <div class="action-btn" @click="showSearch = true">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="11" cy="11" r="8"/>
            <path d="m21 21-4.35-4.35"/>
          </svg>
        </div>
        <div class="action-btn" @click="refreshLocation">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
            <path d="M21 3v5h-5"/>
            <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
            <path d="M3 21v-5h5"/>
          </svg>
        </div>
      </div>
    </div>

    <!-- 医院列表 -->
    <div class="hospital-list">
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-container">
        <div class="loading-spinner"></div>
        <div class="loading-text">正在加载医院数据...</div>
      </div>
      
      <!-- 错误提示 -->
      <div v-if="error" class="error-container">
        <div class="error-icon">⚠️</div>
        <div class="error-text">{{ error }}</div>
        <button class="retry-btn" @click="fetchHospitals">重试</button>
      </div>
      
      <!-- 医院列表 -->
      <div v-if="!loading && !error">
        <div 
          class="hospital-card" 
          :class="{ 'selected': selectedHospitalId === hospital._id }"
          v-for="(hospital, index) in hospitals" 
          :key="hospital._id"
          @click="selectHospital(hospital)"
        >
          <div class="hospital-image">
            <img 
              :src="hospital.image" 
              :alt="hospital.name" 
              @error="(event) => handleImageError(event, hospital.poi, index)"
            />
            <div class="price-tag">¥{{ hospital.price }}</div>
          </div>
          <div class="hospital-info">
            <div class="hospital-name">{{ hospital.name }}</div>
            <div class="hospital-location">{{ hospital.location }} {{ hospital.level }}</div>
            <div class="hospital-rating">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="#ffd700" stroke="#ffd700" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/>
              </svg>
              <span class="rating-text">{{ hospital.rating }} ({{ hospital.reviewCount }} 评论)</span>
            </div>
            <div class="hospital-details">
              <span class="details-link" @click.stop="goToHospitalDetail(hospital)">详情 →</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部按钮 -->
    <div class="bottom-button">
      <button 
        v-if="selectedHospitalId" 
        class="clear-btn" 
        @click="clearSelection"
      >
        清除选择
      </button>
      <button 
        class="next-btn" 
        :class="{ 'disabled': !selectedHospitalId }"
        @click="goToNextStep"
      >
        下一步
      </button>
    </div>
    
    <!-- 搜索弹出框 -->
    <HospitalSearchModal
      v-if="showSearch"
      :hospitals="hospitals"
      @select="onHospitalSelect"
      @close="showSearch = false"
    />
    
    <!-- 预约弹出框 -->
    <AppointmentModal
      :visible="showAppointmentModal"
      @close="showAppointmentModal = false"
      @appointmentTime="handleAppointmentTime"
      @appointmentDoctor="handleAppointmentDoctor"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import HospitalSearchModal from './HospitalSearchModal.vue'
import AppointmentModal from './AppointmentModal.vue'

const router = useRouter()

const hospitals = ref<any[]>([])
const loading = ref(false)
const error = ref('')
const selectedHospitalId = ref<string>('')
const userLocation = ref<{latitude: number, longitude: number} | null>(null)
const showSearch = ref(false)
const showAppointmentModal = ref(false)

// 获取医院图片的函数
const getHospitalImage = (index: number) => {
  // 使用本地图片作为备用
  return '/src/views/sow/9957.jpg_wh860.jpg'
}

// 获取医院图片URL的函数 - 优先使用高德API返回的照片
const getHospitalImageUrl = (poi: any, index: number) => {
  // 优先使用高德API返回的照片
  if (poi.photos && poi.photos.length > 0) {
    const photoUrl = poi.photos[0].url
    console.log(`医院 ${poi.name} 使用高德API照片:`, photoUrl)
    return photoUrl
  }
  
  // 如果没有照片，使用备用图片
  console.log(`医院 ${poi.name} 使用备用图片:`, getHospitalImage(index))
  return getHospitalImage(index)
}

// 图片加载错误处理函数
const handleImageError = (event: any, poi: any, index: number) => {
  console.log(`图片加载失败，切换到备用图片:`, event.target.src)
  // 如果高德API的照片加载失败，切换到备用图片
  event.target.src = getHospitalImage(index)
}

const fetchHospitals = async () => {
  loading.value = true
  error.value = ''
  
  try {
    // 获取用户位置
    await getUserLocation()
    
    // 获取选中的科室信息
    const selectedDepartment = localStorage.getItem('selectedDepartment')
    const departmentData = selectedDepartment ? JSON.parse(selectedDepartment) : null
    console.log('选中的科室数据:', departmentData)
    console.log('用户位置:', userLocation.value)
    
    // 使用高德API获取附近医院
    if (userLocation.value) {
      const gaodeKey = 'e1f464825775ab939a6421df5754e340'
      const { latitude, longitude } = userLocation.value
      
      // 根据科室类型调整搜索关键词
      let keywords = '医院'
      if (departmentData?.name) {
        // 根据科室名称添加特定关键词
        if (departmentData.name.includes('儿科')) {
          keywords = '医院' // 先搜索所有医院，再过滤
        } else if (departmentData.name.includes('心脏')) {
          keywords = '医院'
        } else if (departmentData.name.includes('妇产科')) {
          keywords = '医院'
        }
      }
      
      console.log('搜索关键词:', keywords)
      console.log('搜索位置:', `${longitude},${latitude}`)
      
      const response = await fetch(`https://restapi.amap.com/v3/place/around?key=${gaodeKey}&location=${longitude},${latitude}&keywords=${keywords}&types=090000|090100|090200&radius=10000&offset=20&page=1&extensions=all`)
      const data = await response.json()
      
      console.log('高德API返回数据:', data)
      console.log('返回的POI数量:', data.pois?.length || 0)
      console.log('API状态:', data.status)
      console.log('API信息:', data.info)
      
      // 检查第一个POI的照片信息
      if (data.pois && data.pois.length > 0) {
        console.log('第一个POI的照片信息:', data.pois[0].photos)
        console.log('第一个POI的完整信息:', data.pois[0])
      }
      
      if (data.pois && data.pois.length > 0) {
        // 转换高德API数据格式为应用需要的格式
        hospitals.value = data.pois.map((poi: any, index: number) => ({
          _id: poi.id || `hospital_${index}`,
          name: poi.name,
          level: poi.type || '医院',
          rating: 4.0 + Math.random() * 0.5, // 随机评分 4.0-4.5
          reviewCount: Math.floor(Math.random() * 200) + 50, // 随机评论数 50-250
          price: Math.floor(Math.random() * 150) + 50, // 随机价格 50-200
          image: getHospitalImageUrl(poi, index), // 优先使用高德API返回的照片
          distance: poi.distance ? `${(parseFloat(poi.distance) / 1000).toFixed(1)}km` : '距离未知',
          location: poi.distance ? `距离您 ${(parseFloat(poi.distance) / 1000).toFixed(1)}km` : '距离未知',
          availableTime: '今天 15:30', // 默认时间
          address: poi.address || '地址信息暂无',
          phone: poi.tel || '电话信息暂无',
          workingHours: '08:00 - 18:00', // 默认工作时间
          poi: poi // 保存原始高德数据
        }))
        
        console.log('已加载附近医院数据:', hospitals.value.length, '家医院')
        
        // 如果返回的医院数量少于5家，尝试更广泛的搜索
        if (hospitals.value.length < 5) {
          console.log('医院数量较少，尝试更广泛的搜索...')
          const broaderResponse = await fetch(`https://restapi.amap.com/v3/place/around?key=${gaodeKey}&location=${longitude},${latitude}&keywords=医疗&types=090000|090100|090200&radius=15000&offset=30&page=1&extensions=all`)
          const broaderData = await broaderResponse.json()
          
          if (broaderData.pois && broaderData.pois.length > 0) {
            const additionalHospitals = broaderData.pois
              .filter((poi: any) => poi.name.includes('医院') || poi.name.includes('医疗') || poi.name.includes('保健'))
              .slice(0, 10 - hospitals.value.length)
              .map((poi: any, index: number) => ({
                _id: poi.id || `hospital_extra_${index}`,
                name: poi.name,
                level: poi.type || '医院',
                rating: 4.0 + Math.random() * 0.5,
                reviewCount: Math.floor(Math.random() * 200) + 50,
                price: Math.floor(Math.random() * 150) + 50,
                image: getHospitalImageUrl(poi, hospitals.value.length + index),
                distance: poi.distance ? `${(parseFloat(poi.distance) / 1000).toFixed(1)}km` : '距离未知',
                location: poi.distance ? `距离您 ${(parseFloat(poi.distance) / 1000).toFixed(1)}km` : '距离未知',
                availableTime: '今天 15:30',
                address: poi.address || '地址信息暂无',
                phone: poi.tel || '电话信息暂无',
                workingHours: '08:00 - 18:00',
                poi: poi
              }))
            
            hospitals.value = [...hospitals.value, ...additionalHospitals]
            console.log('扩展搜索后总医院数量:', hospitals.value.length)
          }
        }
      } else {
        throw new Error('未找到附近医院')
      }
    } else {
      throw new Error('无法获取用户位置')
    }
    
  } catch (err) {
    console.error('获取医院数据失败:', err)
    console.log('使用默认医院数据')
    error.value = '' // 清空错误，使用默认数据
    
          // 如果API调用失败，使用默认数据（附近医院）
      const nearbyHospitals = [
        {
          _id: '1',
          name: '附近综合医院',
          location: '距离您 0.8km',
          level: '二级甲等',
          rating: 4.2,
          reviewCount: 156,
          price: 120,
          image: '/src/views/sow/9957.jpg_wh860.jpg',
          distance: '0.8km',
          availableTime: '今天 15:30',
          address: '北京市朝阳区建国路88号',
          phone: '010-12345678',
          workingHours: '08:00 - 18:00'
        },
        {
          _id: '2',
          name: '社区医疗中心',
          location: '距离您 1.2km',
          level: '一级甲等',
          rating: 4.0,
          reviewCount: 89,
          price: 80,
          image: '/src/views/sow/9957.jpg_wh860.jpg',
          distance: '1.2km',
          availableTime: '今天 16:00',
          address: '北京市朝阳区望京街道15号',
          phone: '010-87654321',
          workingHours: '08:30 - 17:30'
        },
        {
          _id: '3',
          name: '区域人民医院',
          location: '距离您 2.1km',
          level: '三级乙等',
          rating: 4.5,
          reviewCount: 234,
          price: 200,
          image: '/src/views/sow/9957.jpg_wh860.jpg',
          distance: '2.1km',
          availableTime: '明天 09:00',
          address: '北京市海淀区中关村大街123号',
          phone: '010-11223344',
          workingHours: '07:30 - 18:30'
        },
        {
          _id: '4',
          name: '专科医疗中心',
          location: '距离您 3.5km',
          level: '三级甲等',
          rating: 4.7,
          reviewCount: 445,
          price: 350,
          image: '/src/views/sow/9957.jpg_wh860.jpg',
          distance: '3.5km',
          availableTime: '今天 14:00',
          address: '北京市西城区复兴门内大街168号',
          phone: '010-55667788',
          workingHours: '08:00 - 17:00'
        },
        {
          _id: '5',
          name: '市立医院分院',
          location: '距离您 4.8km',
          level: '三级甲等',
          rating: 4.6,
          reviewCount: 678,
          price: 280,
          image: '/src/views/sow/9957.jpg_wh860.jpg',
          distance: '4.8km',
          availableTime: '明天 10:30',
          address: '北京市东城区王府井大街99号',
          phone: '010-99887766',
          workingHours: '08:00 - 18:00'
        }
      ]
      
      // 根据距离排序
      hospitals.value = nearbyHospitals.sort((a, b) => {
        const distanceA = parseFloat(a.distance.replace('km', ''))
        const distanceB = parseFloat(b.distance.replace('km', ''))
        return distanceA - distanceB
      })
      
      console.log('已加载附近医院数据:', hospitals.value.length, '家医院')
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  console.log('医院选择页面已加载')
  fetchHospitals()
  // 从本地存储恢复选中状态
  const savedHospitalId = localStorage.getItem('selectedHospitalId')
  if (savedHospitalId) {
    selectedHospitalId.value = savedHospitalId
    console.log('恢复选中医院ID:', savedHospitalId)
  }
})

const selectHospital = (hospital: any) => {
  console.log('选择医院:', hospital.name)
  
  // 更新选中状态
  selectedHospitalId.value = hospital._id
  
  // 存储选中的医院ID到本地存储
  localStorage.setItem('selectedHospitalId', hospital._id)
  
  // 存储选中的医院完整信息到本地存储
  localStorage.setItem('selectedHospital', JSON.stringify(hospital))
}

const goToHospitalDetail = (hospital: any) => {
  console.log('查看医院详情:', hospital.name)
  
  // 存储医院信息到localStorage，供详情页使用
  localStorage.setItem('selectedHospital', JSON.stringify(hospital))
  
  // 跳转到医院详情页
  router.push(`/hospital-detail/${hospital._id}`)
}

const goToNextStep = () => {
  console.log('点击下一步')
  // 检查是否有选中的医院
  if (selectedHospitalId.value) {
    // 显示预约弹出框
    showAppointmentModal.value = true
  } else {
    // 使用轻提示
    showToast('请先选择一个医院')
  }
}

// 处理预约时间
const handleAppointmentTime = () => {
  showAppointmentModal.value = false
  // 跳转到时间选择页面
  router.push('/time-select')
}

// 处理预约医生
const handleAppointmentDoctor = () => {
  showAppointmentModal.value = false
  // 跳转到医生选择页面
  router.push('/doctor-select')
}

// 清除选中状态
const clearSelection = () => {
  selectedHospitalId.value = ''
  localStorage.removeItem('selectedHospitalId')
  localStorage.removeItem('selectedHospital')
  console.log('已清除选中状态')
}

// 获取用户位置
const getUserLocation = (): Promise<void> => {
  return new Promise((resolve, reject) => {
    if (!navigator.geolocation) {
      console.log('浏览器不支持地理位置')
      reject(new Error('浏览器不支持地理位置'))
      return
    }
    
    navigator.geolocation.getCurrentPosition(
      (position) => {
        userLocation.value = {
          latitude: position.coords.latitude,
          longitude: position.coords.longitude
        }
        console.log('获取到用户位置:', userLocation.value)
        resolve()
      },
      (error) => {
        console.log('获取位置失败:', error.message)
        // 使用默认位置（北京）
        userLocation.value = {
          latitude: 39.9042,
          longitude: 116.4074
        }
        console.log('使用默认位置（北京）:', userLocation.value)
        resolve()
      },
      {
        enableHighAccuracy: true,
        timeout: 10000,
        maximumAge: 60000
      }
    )
  })
}

// 刷新位置并重新获取医院
const refreshLocation = async () => {
  console.log('刷新位置')
  showToast('正在刷新位置...')
  await fetchHospitals()
}

const goToSearch = () => {
  console.log('点击搜索按钮')
  router.push('/hospital-search')
}

// 轻提示函数
const showToast = (message: string) => {
  // 创建toast元素
  const toast = document.createElement('div')
  toast.className = 'toast-message'
  toast.textContent = message
  
  // 添加到页面
  document.body.appendChild(toast)
  
  // 显示动画
  setTimeout(() => {
    toast.classList.add('show')
  }, 10)
  
  // 3秒后移除
  setTimeout(() => {
    toast.classList.remove('show')
    setTimeout(() => {
      document.body.removeChild(toast)
    }, 300)
  }, 3000)
}

function onHospitalSelect(hospital: any) {
  selectedHospitalId.value = hospital._id
  localStorage.setItem('selectedHospitalId', hospital._id)
  localStorage.setItem('selectedHospital', JSON.stringify(hospital))
  showSearch.value = false
}
</script>

<style lang="scss" scoped>
.hospital-page {
  min-height: 100vh;
  background: #f6f8fc;
  font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
}

.header {
  background: #1877F2;
  padding: 12px 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 44px;
}

.back-btn, .home-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.header-title {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  flex: 1;
  text-align: center;
}

.section-header {
  background: #fff;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid #f0f0f0;
}

.title-section {
  .main-title {
    font-size: 24px;
    font-weight: 700;
    color: #222;
    margin-bottom: 4px;
  }
  .sub-title {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
  }
  .location-info {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #1877F2;
    font-weight: 500;
  }
}

.action-buttons {
  display: flex;
  gap: 12px;
}

.action-btn {
  width: 40px;
  height: 40px;
  border: 1px solid #e0e0e0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: #fff;
}

.hospital-list {
  padding: 16px;
  padding-bottom: 100px; // 为底部按钮留出空间
}

.loading-container, .error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: #666;
  font-size: 16px;
}

.loading-spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #1877F2;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

.loading-text {
  margin-bottom: 10px;
}

.error-icon {
  font-size: 40px;
  margin-bottom: 10px;
}

.error-text {
  margin-bottom: 15px;
  text-align: center;
}

.retry-btn {
  width: 100px;
  height: 40px;
  background: #1877F2;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
  
  &:hover {
    background: #1565c0;
  }
  
  &:active {
    background: #0d47a1;
  }
}

.hospital-card {
  background: #fff;
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(24,119,242,0.15);
  }
  
  &.selected {
    border-color: #1877F2;
    background: linear-gradient(135deg, #f8fbff 0%, #e3f2fd 100%);
    box-shadow: 0 4px 16px rgba(24,119,242,0.2);
    transform: translateY(-2px);
    
    .hospital-name {
      color: #1877F2;
      font-weight: 700;
    }
    
    .price-tag {
      background: #1877F2;
      color: #fff;
    }
  }
}

.hospital-image {
  position: relative;
  height: 200px;
  overflow: hidden;
  
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .price-tag {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
  }
}

.hospital-info {
  padding: 16px;
}

.hospital-name {
  font-size: 18px;
  font-weight: 600;
  color: #222;
  margin-bottom: 8px;
  line-height: 1.4;
}

.hospital-location {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.hospital-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  
  .rating-text {
    font-size: 14px;
    color: #666;
  }
}

.hospital-details {
  display: flex;
  justify-content: flex-end;
  
  .details-link {
    color: #1877F2;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s ease;
    
    &:hover {
      color: #0d47a1;
      text-decoration: underline;
    }
  }
}

.bottom-button {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background: #fff;
  border-top: 1px solid #f0f0f0;
  z-index: 100;
  display: flex;
  gap: 12px;
  align-items: center;
}

.clear-btn {
  height: 48px;
  padding: 0 20px;
  background: #f5f5f5;
  color: #666;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  
  &:hover {
    background: #e0e0e0;
    color: #333;
  }
  
  &:active {
    background: #d0d0d0;
  }
}

.next-btn {
  flex: 1;
  height: 48px;
  background: #1877F2;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  
  &:hover {
    background: #1565c0;
  }
  
  &:active {
    background: #0d47a1;
  }
  
  &.disabled {
    background: #ccc;
    color: #999;
    cursor: not-allowed;
    
    &:hover {
      background: #ccc;
    }
  }
}

// 轻提示样式
.toast-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  z-index: 9999;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
  
  &.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>